<script setup>
import PageContainer from '@/components/PageContainer.vue'
import { ref, onMounted } from 'vue'
import { getTypePage, saveOrUpdateType, deleteType } from '@/api/type.js'
import { Delete, Edit, Search } from '@element-plus/icons-vue'
import EditDialog from './components/edit.vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const type = ref({
  id: '',
  name: ''
})
const pageNum = ref(1)
const pageSize = ref(10)
const total = ref(0)
const loading = ref(true)

const tableData = ref([])
const getTableData = async () => {
  loading.value = true
  const res = await getTypePage({
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    ...type.value
  })
  tableData.value = res.data['records']
  total.value = res.data.total
  loading.value = false
}
onMounted(async () => {
  await getTableData()
})

const handleSizeChange = (val) => {
  pageSize.value = val
  getTableData()
}
const handleCurrentChange = (val) => {
  pageNum.value = val
  getTableData()
}

const reset = () => {
  type.value = {
    id: '',
    name: ''
  }
  getTableData()
}

// 组件
const formData = ref({
  id: '',
  name: ''
})
let visible = ref(false)
let isAdd = ref(false)
let title = ref('')
const handleEditDialogConfirm = async (formData) => {
  if (isAdd.value) {
    await saveOrUpdateType(formData)
    await handleEditDialogClose()
    await getTableData()
    ElMessage.success('新增成功')
  } else {
    await saveOrUpdateType(formData)
    await handleEditDialogClose()
    await getTableData()
    ElMessage.success('编辑成功')
  }
}
const handleEditDialogClose = async () => {
  visible.value = false
  isAdd.value = true
  title.value = ''
  formData.value = {
    id: '',
    name: ''
  }
  await getTableData()
}
// 打开
const handleEditDialog = (type, data) => {
  if (type === 'edit') {
    isAdd.value = false
    title.value = '编辑'
    formData.value = data
  } else {
    isAdd.value = true
    title.value = '新增'
  }
  visible.value = true
}
// 多选
const multipleSelection = ref([])
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}
// 删除
const handleDelete = (row) => {
  ElMessageBox.confirm('确定删除你所选择的数据吗?', 'Warning', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    if (multipleSelection.value.length <= 0) {
      await deleteType([row.id])
      await getTableData()
      ElMessage.success('删除成功')
      return
    }
    const ids = multipleSelection.value.map((item) => item.id)
    await deleteType(ids)
    await getTableData()
    ElMessage.success('删除成功')
  })
}
</script>

<template>
  <div>
    <page-container title="类型管理">
      <template #extra>
        <el-button @click="handleEditDialog('add')" type="success"
          >新增类型
        </el-button>
      </template>
      <template #search>
        <el-input
          size="default"
          v-model.trim="type.name"
          placeholder="类型名称"
        ></el-input>
        <el-button
          :icon="Search"
          @click="getTableData"
          size="default"
          type="primary"
        >
          查询
        </el-button>
        <el-button @click="reset" size="default">重置</el-button>
      </template>
      <template #body>
        <el-table
          v-loading="loading"
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="name" label="类型名称" />
          <el-table-column prop="createTime" label="创建时间" />
          <el-table-column prop="updateTime" label="修改时间" />
          <el-table-column prop="scope" label="操作" width="160">
            <template #default="scope">
              <el-button
                type="primary"
                :icon="Edit"
                circle
                @click="handleEditDialog('edit', scope.row)"
              ></el-button>
              <el-button
                type="danger"
                :icon="Delete"
                circle
                @click="handleDelete(scope.row)"
              ></el-button>
            </template>
          </el-table-column>
          <template #empty>
            <el-empty description="暂无数据" />
          </template>
        </el-table>
      </template>
      <template #footer>
        <el-pagination
          v-model:current-page="pageNum"
          v-model:page-size="pageSize"
          :page-sizes="[5, 10, 20, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </template>
    </page-container>
  </div>
  <!-- 新增/编辑 -->
  <EditDialog
    :visible="visible"
    :isAdd="isAdd"
    :formData="formData"
    :title="title"
    @confirm="handleEditDialogConfirm"
    @cancel="handleEditDialogClose"
  />
</template>

<style scoped lang="scss">
.level {
  display: flex;
  align-items: center;
}
</style>
